import React, { useEffect, useState } from "react";
import {
  PageContainer,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormRadio,
} from "@ant-design/pro-components";
import { Flex, Card, Radio, Button, Checkbox } from "antd";
import type { RadioChangeEvent } from "antd";
import { QuestionTypeApi, QuestionSortApi } from "@/service";
import {
  searchQuestionParams,
  sortItem,
  QuestionTypeItem,
} from "@/service/type";
import style from "./AddCon.module.scss";

export const AddCon: React.FC = () => {
  // 单选互斥状态
  const [value, setValue] = useState(1);
  // 单选多选分类
  const [questionsSort, setQuestionsSort] = useState<sortItem[]>([]);
  // 题库分类
  const [questionsType, setQuestionsType] = useState<QuestionTypeItem[]>([]);
  const arr = ["A", "B", "C", "D"];
  const [type, setType] = useState<1 | 2 | 3 | 4>(1);
  const [query, setQuery] = useState<searchQuestionParams>({
    page: 1,
    pagesize: 10,
    type: undefined,
    classify: undefined,
    question: undefined,
  });
  const onRadioChange = (e: RadioChangeEvent) => {
    setValue(e.target.value);
  };
  // const onCheckChange: GetProp = (typeof Checkbox.Group, 'onChange') = (checkedValues) => {
  //   console.log('checked = ', checkedValues);
  // };
  // 物理化学分类
  const QuestionTypeData = async () => {
    try {
      const res = await QuestionTypeApi(query);
      setQuestionsType(res.data.data.list);
    } catch (e) {
      console.log(e);
    }
  };
  // 单选多选分类
  const QuestionSortData = async () => {
    try {
      const res = await QuestionSortApi();
      setQuestionsSort(res.data.data.list);
    } catch (e) {
      console.log(e);
    }
  };
  useEffect(() => {
    QuestionTypeData();
    QuestionSortData();
  }, []);
  return (
    <PageContainer>
      <Card>
        <ProForm
          submitter={{
            searchConfig: {
              resetText: "重置",
              submitText: "提交",
            },
            // 配置按钮的属性
            resetButtonProps: {
              style: {
                // 隐藏重置按钮
                display: "none",
              },
            },
            submitButtonProps: {},

            // 完全自定义整个区域
            render: (props, doms) => {
              console.log(props);
              return [
                <Button
                  type="default"
                  key="rest"
                  onClick={() => props.form?.resetFields()}
                >
                  重置
                </Button>,
                <Button
                  type="primary"
                  key="submit"
                  onClick={() => props.form?.submit?.()}
                >
                  提交
                </Button>,
                <Button
                  type="default"
                  key="back"
                  onClick={() => (window.location.href = "/question/item-bank")}
                >
                  返回
                </Button>,
              ];
            },
          }}
          onFinish={async (values) => {
            console.log('提交内容',values)
            const options = [{
              ...values,
            }]
          }}
        >
          <ProForm.Group key="from-group1">
            <ProFormSelect
              key="sel-1"
              options={questionsSort.map((it) => ({
                value: it.value,
                label: it.name,
              }))}
              width="sm"
              // number | "sm" | "md" | "xl" | "xs" | "lg" | undefined”。
              name="chapter"
              label="题型"
              rules={[
                {
                  required: true,
                  message: "请输入题型",
                },
              ]}
              onChange={(e: 1 | 2 | 3 | 4)=> {
                setType(e)
              }}
            />
            <ProFormSelect
              key="sel-2"
              width="sm"
              options={questionsType.map((it) => ({
                value: it.name,
                label: it.name,
              }))}
              name="unusedMode"
              label="分类"
              rules={[
                {
                  required: true,
                  message: "请输入分类",
                },
              ]}
            />
          </ProForm.Group>

          <ProForm.Group key="from-group2">
            <ProFormTextArea
              key="ta-1"
              width="xl"
              label="题目"
              name="tit"
              rules={[
                {
                  required: true,
                  message: "题目不能为空",
                },
              ]}
            />
          </ProForm.Group>

          <ProForm.Group
            key="from-group3"
            label="选项"
            className={style.optionArr}
          >
          { (type === 1)  &&
           ( <Radio.Group
            onChange={onRadioChange}
            defaultValue={arr[0]}
            // value={value}
            options={arr.map((it, i) => (
              {
                value: it,
                label: (
                  <>
                    <Flex gap="small" justify="center" align="center" vertical>
                      {arr[i]}
                    </Flex>
                    <ProFormText
                      width="md"
                      name={`name-radio${i}`}
                      tooltip="Up to 24 characters"
                      placeholder="请输入"
                      rules={[
                        {
                          required: true,
                          message: '选项内容不能为空',
                        }
                      ]}
                    />
                  </>
                  
                )
              }
            ))}
           />)
          }
          {  type === 2 &&
            (<Checkbox.Group
            defaultValue={[arr[0]]} 
            // onChange={onCheckChange}
            options={arr.map((it, i) => (
              {
                value: it,
                label: (
                  <>
                    <Flex gap="small" justify="center" align="center" vertical>
                      {arr[i]}
                    </Flex>
                    <ProFormText
                      width="md"
                      name={`name-check${i}`}
                      tooltip="Up to 24 characters"
                      placeholder="请输入"
                      rules={[
                        {
                          required: true,
                          message: '选项内容不能为空',
                        }
                      ]}
                    />
                  </>
                  
                )
              }
            ))}
            />)
          } 
           { type === 3 &&
            (<Radio.Group
              name="radiogroup"
              defaultValue={1}
              options={[
                { value: 1, label: '对' },
                { value: 2, label: '错' },
              ]}
            />)
          } 
          { type === 4  &&
            (<ProFormText
              width="md"
              name="name"
              label="正确答案"
              tooltip="Up to 24 characters"
              placeholder="请输入"
            />)
          }
           
          </ProForm.Group>

          <ProFormTextArea key="ta-2" width="xl" label="解析" name="remark" />
        </ProForm>
      </Card>
    </PageContainer>
  );
};
